import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

interface User {
  id: number;
  name: string;
  email: string;
  role: string;
  status: string;
  lastLogin: string;
}

@Component({
  selector: 'app-users',
  standalone: true,
  imports: [CommonModule, FormsModule],
  styleUrls: ['./users.component.css'],
  template: `
    <div class="users-page">
      <div class="page-header">
        <h2>用户管理</h2>
        <button class="add-user-btn" (click)="openAddUserModal()">
          <i class="fas fa-plus"></i> 添加用户
        </button>
      </div>

      <div class="search-bar">
        <div class="search-input">
          <i class="fas fa-search"></i>
          <input type="text" [(ngModel)]="searchQuery" placeholder="搜索用户..." (input)="filterUsers()">
        </div>
        <div class="filters">
          <select [(ngModel)]="roleFilter" (change)="filterUsers()">
            <option value="all">所有角色</option>
            <option value="admin">管理员</option>
            <option value="user">普通用户</option>
          </select>
          <select [(ngModel)]="statusFilter" (change)="filterUsers()">
            <option value="all">所有状态</option>
            <option value="active">活跃</option>
            <option value="inactive">未激活</option>
          </select>
        </div>
      </div>

      <div class="users-table">
        <table>
          <thead>
            <tr>
              <th>用户名</th>
              <th>邮箱</th>
              <th>角色</th>
              <th>状态</th>
              <th>最后登录</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let user of filteredUsers">
              <td>{{user.name}}</td>
              <td>{{user.email}}</td>
              <td>{{user.role === 'admin' ? '管理员' : '普通用户'}}</td>
              <td>
                <span class="status-badge" [class.status-active]="user.status === 'active'" 
                                          [class.status-inactive]="user.status === 'inactive'">
                  {{user.status === 'active' ? '活跃' : '未激活'}}
                </span>
              </td>
              <td>{{user.lastLogin}}</td>
              <td>
                <div class="action-buttons">
                  <button class="action-btn" (click)="editUser(user)">
                    <i class="fas fa-edit"></i>
                  </button>
                  <button class="action-btn" (click)="deleteUser(user)">
                    <i class="fas fa-trash"></i>
                  </button>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  `
})
export class UsersComponent implements OnInit {
  users: User[] = [
    {
      id: 1,
      name: '张三',
      email: 'zhangsan@example.com',
      role: 'admin',
      status: 'active',
      lastLogin: '2024-01-20 14:30'
    },
    {
      id: 2,
      name: '李四',
      email: 'lisi@example.com',
      role: 'user',
      status: 'active',
      lastLogin: '2024-01-19 09:15'
    },
    {
      id: 3,
      name: '王五',
      email: 'wangwu@example.com',
      role: 'user',
      status: 'inactive',
      lastLogin: '2024-01-15 16:45'
    }
  ];

  filteredUsers: User[] = [];
  searchQuery: string = '';
  roleFilter: string = 'all';
  statusFilter: string = 'all';

  ngOnInit() {
    this.filteredUsers = [...this.users];
  }

  filterUsers() {
    this.filteredUsers = this.users.filter(user => {
      const matchesSearch = user.name.toLowerCase().includes(this.searchQuery.toLowerCase()) ||
                           user.email.toLowerCase().includes(this.searchQuery.toLowerCase());
      const matchesRole = this.roleFilter === 'all' || user.role === this.roleFilter;
      const matchesStatus = this.statusFilter === 'all' || user.status === this.statusFilter;

      return matchesSearch && matchesRole && matchesStatus;
    });
  }

  openAddUserModal() {
    // TODO: 实现添加用户的模态框
    console.log('打开添加用户模态框');
  }

  editUser(user: User) {
    // TODO: 实现编辑用户的功能
    console.log('编辑用户:', user);
  }

  deleteUser(user: User) {
    // TODO: 实现删除用户的功能
    console.log('删除用户:', user);
  }
}